<template>
  <div class="uml">
    <div class="uml-container">
      <ul class="uml-item" v-for="item in options" :key="item.name" @click="currentEntity = item;">
        <li class="uml-item-title" >
          <span >{{ item.name }}</span>
          <span v-if="item.remark">（ {{ item.remark }} ）</span>
          <!-- <el-input v-else v-model="item.name" size="small"></el-input> -->
        </li>
        <li
          v-for="(field, index) in item.fields"
          :key="field.name"
          class="uml-item-field"
          :class="{ active: selectFieldActive == item.name + index }"
          @click="
            selectFieldActive = item.name + index;
            currentField = field;
          "
        >
          <div class="uml-item-field-name">
            {{ field.name }}
            <!-- <el-input v-model="field.name" size="small"></el-input> -->
          </div>

          <div v-if="field.type" class="uml-item-field-type">
            :
            {{ field.type }}
            <!-- <el-select v-model="field.type" placeholder="数据类型">
              <el-option label="字符串" value="string"></el-option>
              <el-option label="整型" value="int"></el-option>
              <el-option label="小数" value="decimal"></el-option>
              <el-option label="枚举" value="enum"></el-option>
              <el-option label="时间" value="datetime"></el-option>
            </el-select> -->
          </div>
          <div v-if="field.remark" class="uml-item-field-remark">
            {{ field.remark }}
            <!-- <el-input v-model="field.remark" size="small"></el-input> -->
          </div>
        </li>
        <li>
          <y-button
            type="text"
            icon="plus"
            label="增加字段"
            @click="addField(item)"
          ></y-button>
          <y-button
            type="text"
            icon="delete"
            label="删除字段"
            @click="deleteField(item)"
          ></y-button>
          <y-button
            type="text"
            icon="delete"
            label="删除实体"
            @click="deleteEntity(item)"
          ></y-button>
        </li>
      </ul>
      <div
        class="uml-item"
        style="
          width: 230px;
          height: 230px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          padding-bottom: 0px;
        "
        @click="addEntity()"
      >
        <i class="el-icon-plus" style="font-size: 40px"></i>
      </div>
    </div>
    <div class="uml-input-center">
      <!-- 实体信息 -->
      <div class="uml-center-title">模型信息</div>
      <div class="uml-property">
        <el-form :model="currentEntity" label-width="60px" size="small">
          <el-form-item label="名称">
            <el-input
              v-model="currentEntity.name"
              placeholder="名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="currentEntity.type" placeholder="类型">
              <el-option label="实体" value="entity"></el-option>
              <el-option label="子项" value="child"></el-option>
              <el-option label="子项列表" value="childs"></el-option>
              <el-option label="从属" value="owned"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="currentEntity.remark"
              placeholder="备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 字段信息 -->
      <div class="uml-property">
        <div class="uml-center-title">字段信息</div>
        <el-form :model="currentField" label-width="60px" size="small">
          <el-form-item label="名称">
            <el-input v-model="currentField.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="currentField.type" placeholder="数据类型">
              <el-option label="字符串" value="string"></el-option>
              <el-option label="整型" value="int"></el-option>
              <el-option label="小数" value="decimal"></el-option>
              <el-option label="枚举" value="enum"></el-option>
              <el-option label="时间" value="datetime"></el-option>
              <el-option label="实体" value="entity"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="枚举项" v-if="currentField.type == 'enum'">
            <y-dynamic-tags :options="currentField.params"></y-dynamic-tags>
          </el-form-item>
          <el-form-item label="实体" v-if="currentField.type == 'entity'">
            <el-select v-model="currentField.params" placeholder="实体">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认值">
            <el-input
              v-model="currentField.defValue"
              placeholder="默认值"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="currentField.remark"
              placeholder="备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>



<script>
import interact from "interactjs";
export default {
  name: "uml-panel",
  props: {
    options: Array,
  },
  data() {
    return {
      defOptions: [],
      currentField: {},
      selectFieldActive: "",
      currentEntity: {},
    };
  },
  created() {
    this.options.forEach((op) => {
      if (op.fields) {
        op.fields.forEach((f) => {
          f.params = f.params || [];
        });
      }
    });
  },
  mounted() {
    const position = { x: 0, y: 0 };

    // interact(".uml-item").draggable({
    //   listeners: {
    //     start(event) {
    //       console.log(event.type, event.target);
    //     },
    //     move(event) {
    //       position.x += event.dx;
    //       position.y += event.dy;

    //       event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
    //     },
    //   },
    // });
  },
  methods: {
    fieldAsColumns(fields) {},
    inputTextIsShow(key) {
      this["inputTextIsShow" + key] = this[key] || false;
      return this[key];
    },
    inputTextToggle(key) {
      this["inputTextIsShow" + key] = !this["inputTextIsShow" + key];
    },
    /**
     * 添加实体
     */
    addEntity() {
      let newName = "New Entity";
      let index = this.options.filter((o) => o.name.startsWith(newName)).length;
      index++;
      this.options.push({
        name: newName + index,
        remark: "",
        fields: [
          { name: "New Field1", type: "string", remark: "", params: [] },
        ],
      });
    },
    /**
     * 添加字段
     */
    addField(currentEntity) {
      let newName = "New Field";
      let index = currentEntity.fields.filter((o) => o.name.startsWith(newName))
        .length;
      index++;
      currentEntity.fields.push({
        name: "New Field" + index,
        type: "string",
        remark: "",
        params: [],
      });
    },
    /**
     * 删除当时实体
     */
    deleteEntity(item) {
      if (item) this.options.splice(this.options.indexOf(item), 1);
    },
    /**
     * 删除当前字段
     */
    deleteField(item) {
      if (item && item.fields.indexOf(this.currentField) > -1)
        item.fields.splice(item.fields.indexOf(this.currentField), 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #b1f1df !important;
}
.uml-input-center {
  height: 100%;
  .uml-center-title{
    font-size: 18px;
    line-height: 50px;
  }
}
.uml-container {
  .uml-item {
    border-radius: 5px;
    border: 1px solid #22d3a7;
    margin-right: 30px;
    min-height: 200px;
    min-width: 300px;
    padding-bottom: 30px;
    position: relative;
    float: left;
    .uml-item-title {
      font-size: 20px;
      line-height: 30px;
      background-color: #22d3a7;
    }
    .uml-item-field {
      font-size: 18px;
      line-height: 25px;
      position: relative;
      &:hover {
        background-color: #e9fbf6;
        user-select: none;
      }
      > div {
        display: inline-block;
      }
      .uml-item-field-name {
      }
      .uml-item-field-type {
        color: #909399;
        padding-right: 120px;
      }
      .uml-item-field-remark {
        position: absolute;
        color: #909399;
        text-align: right;
        width: 100px;
        right: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    &:last-child {
      margin-right: 0;
    }
    > li {
      list-style: none;
      padding: 0 20px;
      position: relative;
      &:last-child {
        position: absolute;
        bottom: 0;
      }
    }
  }
}
.uml {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
</style>